<template>
        <div id="role" class="container-fluid padding">
            <table class="layui-hide" id="ruleToolbarList"  lay-filter="ruleToolbarList"></table>
            <script type="text/html" id="roleToolbar">
              <div class="layui-btn-container">
                <button class="el-button el-button--success el-button--mini is-round" lay-event="add">新增规则</button>
                <button class="el-button el-button--primary el-button--mini is-round" lay-event="refresh">刷新列表</button>
              </div>
            </script>
            <!--v-pre表示这个代码不需要让vue解析掉-->
            <script type="text/html" id="roleBar" v-pre>
              <button class="el-button el-button--primary el-button--mini is-round" lay-event="edit">编辑</button>
              <button class="el-button el-button--danger el-button--mini is-round" lay-event="del">删除</button>
            </script>
            <!--隐藏项-->
            <div id="edit" style="display: none">
                <el-form :model="datas" :rules="rules" ref="datas" label-width="100px" class="padding">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="datas.name"></el-input>
                    </el-form-item>
                    <el-form-item label="类名" prop="className">
                        <el-input v-model="datas.className" placeholder="请输入类名，需要加上命名空间"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('datas')">保存</el-button>
                        <el-button @click="resetForm('datas')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
</template>

<script>
    export default {
        name: "rule",
        created:function(){
            this.$nextTick(function () {
                layui.use('table', ()=>{//加这个是防止刷新的时候会出现不存在render方法
                    this.$message_.layTable(this,'qx-rule/list','#ruleToolbarList',{},this.table_head,600,'#roleToolbar');
                    //头工具栏事件
                    layui.table.on('toolbar(ruleToolbarList)', (obj)=>{
                        switch(obj.event){
                            case 'add'://新增数据
                                allType = "add";
                                this.datas = {
                                    name:"",
                                    className:"",
                                };//编辑的数据字段
                                this.alertFrame();
                                break;
                            case "refresh":
                                noCheckCache = true;
                                this.$message_.layTable(this,'qx-rule/list','#ruleToolbarList',{},this.table_head,600,'#roleToolbar');
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(ruleToolbarList)', (obj)=>{
                        allId = obj.data.name;
                        switch (obj.event){
                            case "del":
                                allType = "del";
                                layer.confirm('真的删除该行么', (index) => {
                                    this.$message_.postTips(this,'删除','qx-rule/delete?id='+allId,{},null,()=>{obj.del();})
                                    layer.close(index);
                                });
                                break;
                            case "edit":
                                allType = "edit";
                                this.alertFrame(obj);
                                break;
                        }
                    });
                });
            });
        },
        data() {
            return {
                table_head:[
                    {field: 'name',  title: '名称', sort: true,totalRowText: '总条数'}
                    ,{field: 'className',  title: '类名', sort: true}
                    ,{fixed: 'right',width: 165,align:'center',templet: '#roleBar'}
                ],
                datas:{
                    name:"",
                    className:"",
                },//编辑的数据字段
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    className: [
                        { required: true, message: '请输入类名', trigger: 'blur' },
                    ],
                },
                index:"",
                totalCount:"",
                ruleNameOption:{}
            }
        },
        methods: {
            alertFrame: function (obj=null) {
                if (obj!==null){
                    this.datas = obj.data;
                }
                allIndex = this.$message_.layOpen("#edit",() => {
                    switch (allType){
                        case "edit":
                            obj.update(obj.data)
                            break;
                    }
                });
            },
            submitForm:function(datas) {
                this.$refs[datas].validate((valid) => {
                    if (valid) {
                        switch (allType){
                            case "add":
                                this.$message_.postTips(this,'新增','qx-rule/create',{BizRule:this.datas});
                                break;
                            case "edit":
                                this.$message_.postTips(this,'修改','qx-rule/update?id='+allId,{BizRule:this.datas});
                                break;
                        }
                        return false;
                    } else {
                        return false;
                    }
                });
            },
            resetForm(datas) {
                this.$refs[datas].resetFields();
            },
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>